<header>
    <div id="header">
        <section class="top">
            <div class="inner">
                <!-- 头部  左边-->
                <div class="fl">
                    <div class="block_top_menu">
                        <ul>
                            <li class="current"><a href="/">首页</a></li>
                            <li><a href="https://map.baidu.com/">地图</a></li>
                            <li><a href="#">更多功能</a></li>
                        </ul>
                    </div>
                </div>
                <!--  头部 右边-->
                <div class="fr">
                    <div class="block_top_menu">
                        <ul>
                            {% if session['username'] %}
                                <li class="current"><a href="#" class="open_popup">{{ session['username'] }}</a></li>
                                <li class="current"><a href="{{ url_for('account.login_out') }}"
                                                       class="open_popup">退出</a></li>
                                <li><a href="{{ url_for('personal.PersonCenter') }}">个人中心</a></li>
                            {% else %}
                                <li class="current"><a href="#login" class="open_popup">登录</a></li>
                                <li><a href="{{ url_for('account.register') }}">注册</a></li>
                            {% endif %}
                        </ul>
                    </div>

                    <div class="block_social_top">
                        <ul>
                            <li><a href="#" class="fb">Facebook</a></li>
                            <li><a href="#" class="tw">Twitter</a></li>
                            <li><a href="#" class="rss">RSS</a></li>
                        </ul>
                    </div>

                </div>
                <div class="clearboth"></div>
            </div>
        </section>
        <!--logo -->
        <section class="bottom">
            <div class="inner">
                <div id="logo_top"><a href="/"><img src="/static/images/logo_top.png" alt="BusinessNews"
                                                    title="BusinessNews"/></a></div>
                <div class="block_today_date">
                    <div class="num"><p id="num_top"></div>
                    <div class="other">
                        <p class="month_year"><span id="month_top"></span>, <span id="year_top"></span></p>
                        <p id="day_top" class="day">
                    </div>
                </div>
                <div class="clearboth"></div>

                <div class="fr">
                    <div class="block_search_top">
                        <form action="{{ url_for('home.search') }}" method="POST">
                        <div class="field"><input style="text-align:left;font-size:1.2em;height:2.0em;"
                                                  type="text" class="w_def_text"
                                                  title="请输入您要查找的内容" name="search"/></div>
                        <input type="submit" class="button" value="Search"/>
                        <div class="clearboth"></div>
                        </form>
                    </div>
                </div>
            </div>
        </section>
        <!-- 分类 -->
        <section class="section_main_menu">
            <div class="inner">
                <nav class="main_menu">
                    <ul>
                        {# 首页类别 class="current_page_item"#}
                        <li><a href="/">首页</a>
                        </li>
                        {% for category in categorys %}
                            <li class="big_dropdown" data-content="business"><a
                                    href="http://127.0.0.1:8000/cart/{{ category.c_id }}/1">{{ category.c_name }}</a>
                            </li>
                        {% endfor %}
                    </ul>
                </nav>
            </div>
            <div class="inner">
                <div class="block_clock">
                    <p>Time: <span id="time"></span></p>
                </div>
            </div>
        </section>
        <section class="section_secondary_menu"></section>
    </div>
</header>
<div id="overlay"></div>
{#登录弹框#}
<div id="login" class="block_popup">
    <div class="popup">
        <a href="#" class="close">关闭</a>
        <div class="content">
            <div class="title"><p>登录BBC新闻网站</p></div>
            <div class="form">
                <form action="{{ url_for('account.login') }}" method="post">
                    <div class="column">
                        <p class="label">用户名: </p>
                        <div class="field">
                            <input type="text" name="username">
                        </div>
                    </div>
                    <div class="column">
                        <p class="label">密码: </p>
                        <div class="field">
                            <input type="password" name="password">
                        </div>
                    </div>
                    <div class="clearboth"></div>
                    {# 验证码#}
                    <div class="column" style="margin-left: 0px;margin-top: 5px">
                        <img id="code" src="{{ url_for('account.create_code') }}" onclick="ajax1()">
                    </div>

                    <div class="column">
                        <div class="field" style="margin-left: 83px;margin-top: 5px">
                            <p><input type="text" placeholder="验证码" name="yzm"></p>
                        </div>
                    </div>
                    <div class="clearboth"></div>

                    <div class="column_2">
                        <div class="remember">
                            <div class="checkbox">
                                <input type="checkbox">
                                <div class="remember_label"><p>***记住我</p></div>
                            </div>
                        </div>
                    </div>
                    <div class="column_2">
                        <p class="forgot_pass"><a href="#">忘记密码?</a></p>
                    </div>

                    <div class="column button">
                        <button type="submit" class="btn btn-primary" data-toggle="button" aria-pressed="false"
                                autocomplete="off">
                            登录
                        </button>
                    </div>
                    <div class="clearboth"></div>
                </form>
            </div>
            <div class="subtitle" style="margin-top: 10px">
                <a href="{{ url_for('account.admin_login') }}">以管理员登录</a>
            </div>
        </div>
    </div>
</div>
{#动态刷新验证码#}
<script>
    function ajax1() {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', '{{ url_for('account.create_code') }}', true);
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
                $('#code').attr('src', '{{ url_for('account.create_code') }}?' + Math.random())
            }
        };
        xhr.send();
    }
</script>